<template>
    <div class="monthlyAttendanceDetail">
    	<el-breadcrumb separator="/" class="bread-title">
    		<el-breadcrumb-item :to="{ path: '/monthlyAttendance' }">考勤月度统计</el-breadcrumb-item>
    		<el-breadcrumb-item>详情</el-breadcrumb-item>
    	</el-breadcrumb>
		<el-form :inline="true" :model="ruleForm" class="demo-form-inline">
        	<el-form-item label="角色：">
        	    <el-select v-model="ruleForm.roleId" filterable >
        	        <el-option v-for="item in rolelist"
        	                   :key="item.id"
        	                   :label="item.name"
        	                   :value="item.id">
        	        </el-option>
        	    </el-select>
        	</el-form-item>
        	<el-form-item label="区域:" >
        	    <el-select v-model="ruleForm.regionId" filterable>
        	        <el-option v-for="(item,index) in arealist"
        	                   :key="index"
        	                   :label="item.name"
        	                   :value="item.id">
        	        </el-option>
        	    </el-select>
        	</el-form-item>
        	<el-form-item label="城市：">
        	    <el-select v-model="ruleForm.cityId" filterable >
        	        <el-option v-for="(item,index) in citys"
        	                   :key="index"
        	                   :label="item.city"
        	                   :value="item.cityId">
        	        </el-option>
        	    </el-select>
        	</el-form-item>
			<el-form-item label="姓名：">
				<el-input v-model.trim="ruleForm.selectStr" placeholder="姓名/手机号/员工号"></el-input>
			</el-form-item>
			<el-form-item label="出勤状态：">
                <el-select v-model="ruleForm.checkStatus" filterable >
                    <el-option v-for="item in accountlist"
                               :key="item.id"
                               :label="item.name"
                               :value="item.id">
                    </el-option>
                </el-select>
			</el-form-item>
			<el-form-item label="考勤状态：">
                <el-select v-model="ruleForm.attendanceStatus" filterable >
                    <el-option v-for="item in attendancelist"
                               :key="item.id"
                               :label="item.name"
                               :value="item.id">
                    </el-option>
                </el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="searchList" id="monitorEnter">查询</el-button>
				<el-button type="primary" @click="exporthander">导出</el-button>
				<el-button @click="resethander">重置</el-button>
			</el-form-item>
		</el-form>
		
		<el-table :data="tableData" border style="width: 100%">
			<el-table-column type="index" label="序号" width="50" fixed align="center"></el-table-column>
			<el-table-column label="姓名" prop="userName" align="center"></el-table-column>
			<el-table-column label="员工号" prop="jobNumber" align="center"></el-table-column>
			<el-table-column label="手机号" prop="userMobile"  width="130" align="center"></el-table-column>
			<el-table-column label="角色" prop="roleName"  width="110" align="center"></el-table-column>
			<el-table-column label="区域" prop="regionName" align="center"></el-table-column>
			<el-table-column label="城市" prop="cityName" align="center"></el-table-column>
			<el-table-column label="考勤天数" prop="attendanceDays" align="center"></el-table-column>
			<el-table-column label="全勤天数" prop="fullDays" align="center"></el-table-column>
			<el-table-column label="出勤天数" prop="outDays" align="center"></el-table-column>
			<el-table-column label="旷工" prop="notDays" align="center"></el-table-column>
			<el-table-column label="外勤" prop="goDays" align="center"></el-table-column>
			<el-table-column label="申请休息" prop="applyRestDays" align="center"></el-table-column>
			<el-table-column label="正常休息" prop="normalRestDays" align="center"></el-table-column>
			<el-table-column label="调休天数" prop="breakDays" align="center"></el-table-column>
			<el-table-column label="异常天数" prop="abnormalDays" align="center"></el-table-column>
			<el-table-column label="迟到早退30分钟以内次数" width="130" prop="abnormalStandardDays" align="center"></el-table-column>
			<el-table-column label="迟到早退30分钟以上次数" width="130" prop="abnormalNotStandardDays" align="center"></el-table-column>
			<el-table-column label="迟到累积时间（小时）" width="130" prop="leaveEarlyHour" align="center"></el-table-column>
			<el-table-column label="早退累积时间（小时）" width="130" prop="cameLateHour" align="center"></el-table-column>
			<el-table-column label="未参与考勤组天数" width="110" prop="notAttendanceDays" align="center"></el-table-column>
			<el-table-column label="参与考勤组日期" width="210" prop="attendanceDate" align="center" :formatter="initattendanceDate">
	<!-- 			<template slot-scope="scope">
				    <TimeComp :timestamp="scope.row.attendanceDate"></TimeComp>
				</template> -->
			</el-table-column>
		</el-table>	

		<div class="pagebar">
		    <el-pagination
		            background
		            layout="total, sizes, prev, pager, next"
		            :current-page.sync="ruleForm.pageNum"
		            :page-sizes="[10, 20, 30, 40]"
		            :page-size="ruleForm.pageSize"
		            @size-change="handleSizeChange"
		            @current-change="handleCurrentChange"
		            :total="totalSize">
		    </el-pagination>
		</div>

    </div>
</template>

<script>
import api from "@/api/apiPath"
import TimeComp from '@/components/common/timeComp'
import utils from "@/common/utils.js"

export default {
    name:"monthlyAttendanceDetail",
    components: {TimeComp},
    data() {
        return {
        	rolelist:[],
        	arealist:[],
        	citys:[],
        	accountlist:[
        		{id:undefined,name:'请选择'},{id:0,name:'正常'},{id:1,name:'异常'}
			],
        	attendancelist:[
                    {id:undefined,name:'请选择'},
        			{id:0,name:'正常'},
        	        {id:1,name:'迟到'},
        	        {id:2,name:'迟到超30分钟（严重迟到）'},
        	        {id:3,name:'早退'},
        	        {id:4,name:'旷工'},
        	        {id:5,name:'休息'},
        	        {id:6,name:'外勤打卡'},
        	        {id:7,name:'调休'},
        	],
        	tableData:[],
        	ruleForm:{
        		groupId:this.$route.query.gid,
        		yearMonth:this.$route.query.yearMonth,
        		roleId:undefined,
        		regionId:undefined,
        		cityId:undefined,
        		selectStr:'',
        		checkStatus:undefined,//出勤状态
        		attendanceStatus:undefined,//考勤状态
        		pageNum: 1,
        		pageSize: 10,
        	},
        	totalSize: 0
        }
    },
    created() {
        if (this.$route.query.checkStatus!==undefined) {
             this.ruleForm.checkStatus = this.$route.query.checkStatus
        }
		this.getlist()
		this.loadCity()
		this.getrolelist()//角色列表
		this.getarealist()//区域
    },
    methods: {
        initattendanceDate(row, column, cellValue, index){
            return utils.getTimeString(cellValue).slice(0, 10)
        },
    	loadCity(){
    	    this.axios.post(api.CITYLIST).then(res => {
    	        if (res.data.code !== 200) {
    	            this.$message(res.data.msg)
    	        }else {
    	            this.citys = res.data.data.cityList
    	            this.citys.unshift({id:undefined,city:'全部'})
    	        }
    	    })
    	},
    	getrolelist(){
    	    this.$axios.get('/checkin/clockstatus/getrolelist').then(res=>{
    	        this.rolelist = res
    	        this.rolelist.unshift({id:undefined,name:'全部'})

    	    })
    	},
    	getarealist(){
    	    this.$axios.get('city/region/all').then(res=>{                
    	        this.arealist = res
    	        this.arealist.unshift({id:undefined,name:'全部'})
    	    })
    	},
    	handleCurrentChange() {
    	    this.getlist()
    	},
    	handleSizeChange(val) {
    	    this.ruleForm.pageSize = val
    	    this.getlist();
    	},
    	getlist(){
    		this.$axios.post('/checkin/attendance/monthly/detail/list',this.ruleForm).then(res=>{
				this.tableData = res.list
				this.totalSize =res.total
    		})
    	},
    	searchList(){
    		this.ruleForm.pageNum = 1 	  
    		this.getlist()
    	},
    	exporthander(){
            delete this.ruleForm.pageSize
            delete this.ruleForm.pageNum
            this.$axios.service({
              method: "post",
              url: '/checkin/attendance/monthly/detail/download',
              data: this.ruleForm,
              headers: {
                "content-type": "application/json; charset=utf-8",
                token: sessionStorage.getItem("cmsUser")
                  ? JSON.parse(sessionStorage.getItem("cmsUser")).tokenId
                  : ""
              },
              responseType: "blob"
            })
              .then(res => {
                this.downloadFile(res.data)
              })
              .catch(res => {
                this.downloadFile(res.data)
              });
    	},
        // 导出
        downloadFile(data) {
            let url = window.URL.createObjectURL(new Blob([data]));
            let link = document.createElement("a");
            let fileName = `导出${utils.getTimeString(new Date())}.xls`;
            link.style.display = "none";
            link.href = url;
            link.setAttribute("download", fileName);
            document.body.appendChild(link);
            link.click();
            URL.revokeObjectURL(link.href);
            document.body.removeChild(link);
            this.$message({
              message: "导出成功",
              type: "success"
            });
        },
    	resethander(){
    		this.ruleForm.roleId=undefined
    		this.ruleForm.regionId =undefined
    		this.ruleForm.selectStr = ''
    		this.ruleForm.cityId = ''
    		this.ruleForm.attendanceStatus = ''
    		this.ruleForm.checkStatus = ''
    	}


    }
}
</script>
<style lang="stylus" scoped>
</style>